<template>
  <UserSearchCardList @popUp="popUp" @pop-user = "popUser" :user-search-list="userSearchList" />
  <van-empty id="empty" v-if="flag" description="正在搜索中 请稍候..."/>
  <van-empty id="empty" v-if="(!flag) && (!userSearchList || userSearchList.length < 1)" description="抱歉！搜索结果为空"/>
  <!-- 底部弹出 -->
  <van-popup
      v-model:show="showPopUpIndex"
      @open="listUserTeam(showUser.id)"
      position="bottom"
      closeable
      close-icon="clear"
      @close="activeNamesToNull"
      round
      destroy-on-close="true"
  >
    <van-card
        :tag="showUser.gender === 0 ? '男' : '女'"
        :title="`Ta的昵称: ${showUser.username} `"
        :thumb="showUser.avatarUrl"
        id="userCard"
    >
      <template #tags>
        <van-tag round type="primary" size="medium" v-for="tag in showUser.tags" style="margin-right: 8px; margin-top: 8px">
          {{tag}}
        </van-tag>
      </template>
    </van-card>
    <van-collapse v-model="activeNames" accordion v-if="showPopUpIndex">
      <van-collapse-item name="1">
        <template #title>
          <div><van-icon name="description-o" /> 个性签名：</div>
        </template>
        <van-highlight :keywords="showUser.profile" :source-string="showUser.profile" id="userPopShow"/>
        <van-highlight v-if="!showUser.profile" :keywords="'这个人很懒，还没有介绍自己'" :source-string="'这个人很懒，还没有介绍自己'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="2">
        <template #title>
          <div><van-icon name="phone-o" /> 联系方式：</div>
        </template>
        <van-highlight :keywords="showUser.phone" :source-string="showUser.phone" id="userPopShow"/>
        <van-highlight v-if="!showUser.phone" :keywords="'Ta未提供联系方式'" :source-string="'Ta未提供联系方式'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="3">
        <template #title>
          <div><van-icon name="envelop-o" /> 邮箱：</div>
        </template>
        <van-highlight :keywords="showUser.email" :source-string="showUser.email" id="userPopShow"/>
        <van-highlight v-if="!showUser.email" :keywords="'Ta未展示自己的邮箱'" :source-string="'Ta未展示自己的邮箱'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="4">
        <template #title>
          <div><van-icon name="contact-o" /> 星球编号：</div>
        </template>
        <van-highlight :keywords="showUser.planetCode" :source-string="showUser.planetCode ?? 'Ta还没有星球编号'" id="userPopShow"/>
        <van-highlight v-if="!showUser.planetCode" :keywords="'Ta还没有星球编号'" :source-string="'Ta还没有星球编号'" id="userPopShow"/>
      </van-collapse-item>
      <van-collapse-item name="5">
        <template #title>
          <div><van-icon name="flag-o" /> Ta 加入的队伍：</div>
        </template>
        <team-card-list :teamList="userJoinTeamList" />
        <van-highlight v-if="userJoinTeamList.length < 1" :keywords="'Ta 还没有加入队伍'" :source-string="'Ta 还没有加入队伍'" id="userPopShow" />
      </van-collapse-item>
    </van-collapse>
  </van-popup>
</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import qs from 'qs';
import {showFailToast} from "vant";
import UserSearchCardList from "../components/UserSearchCardList.vue";
import TeamCardList from "../components/TeamCardList.vue";

const route = useRoute();
const { tags,searchText } = route.query;
const userSearchList = ref([]);
const flag = ref(true);

// 弹窗传值
const showPopUpIndex = ref();
const showUser = ref();
const popUp=(data:any)=>{
  showPopUpIndex.value = data;
}
const popUser = (dataTwo:any) => {
  showUser.value = dataTwo;
  if(showUser.value.profile === null) {
    showUser.value.profile = '';
  }
  if(showUser.value.phone === null) {
    showUser.value.phone = '';
  }
  if(showUser.value.email === null) {
    showUser.value.email = '';
  }
}

// 用户加入的队伍列表
const userJoinTeamList = ref();
const activeNames = ref<string>();

onMounted( async () =>{
  const userListData = await myAxios.get('/user/search',{
    params: {
      tagNameList: tags,
      searchText: searchText
    },
    paramsSerializer: {
      serialize: params => qs.stringify(params, { indices: false}),
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed',response);
        flag.value = false;
        return response?.data;
      })
      .catch(function (error) {
        console.log('/user/search/tags error',error);
        showFailToast('请求失败');
      });
  if (userListData){
    userListData.forEach(user =>{
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userSearchList.value = userListData;
  }
})

/**
 * 搜索用户加入的队伍
 * @returns {Promise<void>}
 */
const listUserTeam = async (userId) => {
  const res = await myAxios.get('/team/list/user/join', {
    params: {
      userId: userId,
      pageNum: 1,
    },
  });
  // @ts-ignore
  if (res?.code === 0 && res.data){
    userJoinTeamList.value = res.data;
  } else {
    showFailToast('我加入的队伍展示失败，请刷新重试');
  }
};

const activeNamesToNull = () => {
  activeNames.value = '';
}

// const mockUser = [
//   {
//   id: 10,
//   username: '陈凡',
//   userAccount: 'Hang Yunjie',
//   avatarUrl: 'src/assets/vue.svg',
//   gender: '男',
//   profile: '一名原神玩家，喜欢Java开发和玩绝区零！谢谢大家，可以与我合作！',
//   phone: '13265457908',
//   email: '1256661151@qq.com',
//   userRole: 0,
//   planetCode: '2',
//   tags: ['java', 'emo中', '打工人', '原神', '绝区零', '王者荣耀'],
//   createTime: new Date(),
//   },
//   {
//     id: 1,
//     username: '树脂鼠鼠果酱',
//     userAccount: 'Guo Jianghui',
//     avatarUrl: 'src/assets/cuteXiaBa.jpg',
//     gender: '男',
//     profile: '喜欢Java开发、王者荣耀！谢谢大家！',
//     phone: '15083857269',
//     email: '1258981151@qq.com',
//     userRole: 0,
//     planetCode: '1',
//     tags: ['java', 'emo中', '打工人', '王者荣耀'],
//     createTime: new Date(),
//   },
// ]
</script>

<style scoped>
#empty {
  --van-empty-description-font-size: 21px;
  --van-empty-description-padding: 10px;
}
#userPopShow {
  font-size: 15px;
  --van-highlight-tag-color: #1a1a1a;
}
</style>